<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="../js/codeeditor/lib/codemirror.css"/>
	<link rel="stylesheet" type="text/css" href="../js/codeeditor/lib/util/enhanced-hint.css"/>
	<script type="text/javascript" src="../js/codeeditor/lib/codemirror.js"></script>
	<script type="text/javascript" src="../js/codeeditor/lib/util/foldcode.js"></script>
	<script type="text/javascript" src="../js/codeeditor/lib/util/enhanced-hint.js"></script>
	<script type="text/javascript" src="../js/codeeditor/lib/util/searchcursor.js"></script>
	<script type="text/javascript" src="../js/codeeditor/mode/less/less.js"></script>
	<script type="text/javascript" src="../js/codeeditor/mode/xml/xml.js"></script>
	<script type="text/javascript" src="../js/codeeditor/mode/php/php.js"></script>
	<script type="text/javascript" src="../js/codeeditor/mode/mysql/mysql.js"></script>
	<script type="text/javascript" src="../js/codeeditor/mode/css/css.js"></script>
	<script type="text/javascript" src="../js/codeeditor/mode/clike/clike.js"></script>
	<script type="text/javascript" src="../js/codeeditor/mode/javascript/javascript.js"></script>
	<style type="text/css">
		@font-face {
		    font-family: 'MesloLGMDZRegular';
		    src: url('../css/meslolgm-dz-regular-webfont.eot');
		    src: url('../css/meslolgm-dz-regular-webfont.eot?#iefix') format('embedded-opentype'),
		         url('../css/meslolgm-dz-regular-webfont.woff') format('woff'),
		         url('../css/meslolgm-dz-regular-webfont.ttf') format('truetype'),
		         url('../css/meslolgm-dz-regular-webfont.svg#MesloLGMDZRegular') format('svg');
		    font-weight: normal;
		    font-style: normal;
		
		}

		html, body { margin: 0px; padding: 0px; font-size: 11px; }
		html, body, .CodeMirror, .CodeMirror-scroll {
			height: 100%; 
		}
		.CodeMirror pre.activeline {
			background-color: #ffffef;
		}
		.CodeMirror-completions { position: absolute; margin-top: -1em; }
		.CodeMirror-completions select { outline: none; }
		.CodeMirror, .CodeMirror-scroll {
			display: block;
			width: 100% !important;
		}
		.CodeMirror {
			font-family: MesloLGMDZRegular, monospace;
			line-height: 1.5em; 
		}
	</style>
</head>

<body style="background: white; font-family: Helvetica;">
<script type="text/javascript">
//<![CDATA[
	document.body.innerHTML = '<textarea id="code"></textarea>';

	var loadBrush = function(brush) {
		if (!document.getElementById("brush-"+brush)) {
			var scriptNode = document.createElement("script");
			scriptNode.type = "text/javascript";
			scriptNode.id = "brush-"+brush;
			scriptNode.src = "../js/codeeditor/mode/"+brush+"/"+brush+".js";
			document.getElementsByTagName("head")[0].appendChild(scriptNode);
		}
	};
	
	window.txt = document.getElementById("code");
	setTimeout(function() {
		window.init();
	}, 100);
	// auto-complete keywords
	if (!window.keywords) window.keywords = [];	
	/** examples:
	var keywords = [{
		prefix: "_\.",
		items: ["bind", "bing", "tell", "toll"]
	}, {
		prefix: null,
		items: ["invoke", "addLoadEvent", "investigate", "addingAll"]
	}];
	//*/
		
	/**
	 * public functions 
	 */
	// override these:
	txt.search = function() {
		// trigger search
		// ...
	};
	txt.save = function() {
		// trigger save
		// ...
	};
	
	txt.run = function() {
		// trigger run 
		// ...
	};
	
	// don't override these:
	txt.getCode = function() {
		return txt.editor && txt.editor.getValue() || txt.value;
	};
	txt.setCode = function(code) {
		code = code.replace(/&lt;/gi, "<").replace(/&gt;/gi, ">").replace(/&amp;/gi, "&");
		txt.editor.setValue(code);
		return true;
	};
	txt.enable = function(enable) {
		if (enable || typeof(enable) == "undefined") {
			txt.editor.setOption("readonly", true);
		} else {
			txt.editor.setOption("readonly", false);
		}
	};
	txt.setBrush = function(brush) {
		var mode = "";
		switch(brush) {
			case "css": 
				loadBrush("less");
				mode = "text/less";
				txt.foldFunc = CodeMirror.newFoldFunction(CodeMirror.braceRangeFinder);				
				break;
			case "php":
				loadBrush("php");
				mode = "text/x-php";
				txt.foldFunc = CodeMirror.newFoldFunction(CodeMirror.braceRangeFinder);				
				break;
			case "html-php":
				loadBrush("php");
				loadBrush("xml");
				loadBrush("clike");
				loadBrush("javascript");
				loadBrush("css");
				mode = "application/x-httpd-php";
				txt.foldFunc = CodeMirror.newFoldFunction(CodeMirror.tagRangeFinder);				
				break;
			case "js":
				loadBrush("javascript");
				mode = "text/javascript";
				txt.foldFunc = CodeMirror.newFoldFunction(CodeMirror.braceRangeFinder);				
				break;
			case "sql":
				loadBrush("mysql");
				mode = "text/x-mysql";
				break;
		}

		if (txt.editor) {
			txt.editor.getWrapperElement().parentNode.removeChild(txt.editor.getWrapperElement());
		}
		txt.editor = CodeMirror.fromTextArea(txt, {
			lineNumbers: true,
			matchBrackets: true,
			mode: mode,
			indentUnit: 4,
			tabSize: 4,
			onGutterClick: txt.foldFunc,
			onFocus: function() {
				parent.Ext.getCmp("qwbuilder_startupPanel").getActiveTab().el.dom.hasFocus = self.id;				
			},
			onCursorActivity: function() {
				if (window.hlLine) {
					txt.editor.setLineClass(window.hlLine, null);
				}
			    window.hlLine = txt.editor.setLineClass(txt.editor.getCursor().line, "activeline");
			},
			extraKeys: {
				"Ctrl-Space": function(cm) {
					CodeMirror.enhancedHint(cm, function(editor) {
						var cur = editor.getCursor(),
							token = editor.getTokenAt(cur),
							before = token.string,
							activeList = [];
						before = editor.getLine(cur.line).substr(0, cur.ch);
						for (var i = 0; i < window.keywords.length; i++) {
							var itemList = (typeof(window.keywords[i].items) === "function" && window.keywords[i].items(txt)) || window.keywords[i].items;
							itemList.sort();
							if (window.keywords[i].prefix) {
								if (before.search(new RegExp(window.keywords[i].prefix+"$", "gi")) >= 0) {
									for (var j = 0; j < itemList.length; j++) {
										var item = itemList[j]; 
										activeList.push(item);
									}
								} else {
									for (var j = 0; j < window.keywords[i].items.length; j++) {
										var item = itemList[j]; 
										for (var k = item.length; k > 1; k--) {
											if (before.search(new RegExp(window.keywords[i].prefix+item.substr(0, k - 1).replace('$', '\\$').replace('(', "\\(").replace(')', "\\)")+"$", "gi")) >= 0) {
												activeList.push({value: item.substr(k - 1), displayValue: item});
												break;
											}
										}
									}
								}
							} else {
								for (var j = 0; j < itemList.length; j++) {
									var item = itemList[j]; 
									for (var k = item.length; k > 1; k--) {
										if (before.search(new RegExp("([^a-zA-Z0-9$]+|^)"+item.substr(0, k - 1).replace('$', '\\$').replace('(', "\\(").replace(')', "\\)")+"$", "gi")) >= 0) {
											activeList.push({value: item.substr(k - 1), displayValue: item});
											break;
										}
									}
								}							
							}
						}
						return {list: activeList, from: {line: cur.line, ch: cur.ch}, to: {line: cur.line, ch: cur.ch}};
					});
				},
				"Ctrl-S": function(editor) {
					window.txt.save();
				},
				"Ctrl-Alt-Right": function(editor) {
					if (parent.switching) return;
					parent.switching = true;
        			parent.Builder.blurBespin(window.el);
        			parent.Builder.nextTab();
        			setTimeout(function() { parent.switching = false; }, 200);
				}, 
				"Ctrl-Alt-Left": function(editor) {
					if (parent.switching) return;
					parent.switching = true;
					parent.Builder.blurBespin(window.el);
					parent.Builder.previousTab();
        			setTimeout(function() { parent.switching = false; }, 200);
				}
			}			
		});
		window.hlLine = txt.editor.setLineClass(0, "activeline");		
		
		options = options.replace(/brush:[^;]+;/gi, '') + "brush: "+brush.toLowerCase()+";";
	};
	txt.enableHtmlScript = function(enable) {
		if (typeof(enable) == 'undefined' || enable) {
			txt.setBrush("html-php");
			options = options.replace(/html-script:[^;]+;/gi, '') + "html-script: true;";
		} else {
			txt.setBrush("php");
			options = options.replace(/html-script:[^;]+;/gi, '');
		}
	};
	txt.addKeywords = function(prefix, items) {
		keywords.push({prefix: prefix, items: items});
	};
	txt.setSearchText = function(tosearch, regexp) {
		txt.searchQuery = txt.editor.getSearchCursor((regexp ? new RegExp(tosearch, "g") : tosearch), txt.editor.getCursor(), true); 
		txt.searchTerm = tosearch;
		
		if (regexp) {
			txt.searchTerm = new RegExp(tosearch, "gi");
		}
		txt.searchPos = [txt.editor.getCursor(true), txt.editor.getCursor(false)];
	};
	txt.findNext = function(pos, wrap) {
		if (txt.searchQuery) {
			if (txt.searchQuery.findNext()) {
				return [txt.searchQuery.from(), txt.searchQuery.to()];
			} else if (wrap) {
				txt.searchQuery = txt.editor.getSearchCursor(txt.searchTerm);
				if (txt.searchQuery.findNext()) {
					return [txt.searchQuery.from(), txt.searchQuery.to()];
				}
			}
		}
		return null;
	};
	txt.findPrevious = function(pos, wrap) {
		if (txt.searchQuery) {
			if (txt.searchQuery.findPrevious()) {
				return [txt.searchQuery.from(), txt.searchQuery.to()];
			} else if (wrap) {
				txt.searchQuery = txt.editor.getSearchCursor(txt.searchTerm, {line: txt.editor.lineCount() - 1, ch: txt.editor.getLine(txt.editor.lineCount()-1).length - 1});
				if (txt.searchQuery.findPrevious()) {
					return [txt.searchQuery.from(), txt.searchQuery.to()];
				}
			}
		}
		return null;
	};
	txt.setSelection = function(sel) {
		txt.editor.setSelection(sel[0], sel[1]);
	};
	txt.replace = function(sel, text) {
		txt.searchQuery.replace(text);
	};

	var options = "toolbar: false;";
	
	// initialization code:
	/** example:
	window.init = function() {
		window.txt.setBrush("jscript");
		window.txt.setCode("function myTest() {\n	return \"test\";\n}");
		// ...
	};
 	//*/
//]]>
</script>
</html>